<template>
    <div class="icon" :class="[ type === '' ? '' : 'icon-' + type, custom]" :style="{fontSize: `${size}PX`, color: color}"></div>
</template>
<script>
export default {
    name: 'icon',
    props: {
        type: {
            type: String,
            default: ''
        },
        custom: {
            type: String,
            default: ''
        },
        size: {
            type: Number,
            default: 14
        },
        color: {
            type: String,
            default: '#000'
        }
    }
}
</script>
<style>
@font-face {
    font-family: 'iconfont';  /* project id 1221675 */
    src: url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.eot');
    src: url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.woff') format('woff'),
    url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1221675_8x31ohlrs5d.svg#iconfont') format('svg');
}
.icon {
	display: inline-block;
	font-family: iconfont;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: middle
}
.icon-search::before {
    content: '\e656'
}
.icon-message::before {
    content: '\e64f'
}
.icon-person::before {
    content: '\e650'
}
.icon-group::before {
    content: '\e651'
}
.icon-menu::before {
    content: '\e652'
}
.icon-check::before {
    content: '\e653'
}
.icon-face::before {
    content: '\e737'
}
.icon-power-off::before {
    content: '\e624'
}
.icon-lock::before {
    content: '\e7c0'
}
.icon-arrow-up::before {
    content: '\e642'
}
.icon-arrow-down::before {
    content: '\e634'
}
.icon-checkbox::before {
    content: '\e7c3'
}
.icon-checkbox-active::before {
    content: '\e623'
}
.icon-del::before {
    content: '\e67a'
}
.icon-img::before {
    content: '\e655'
}
.icon-close::before {
    content: '\e61f'
}
.icon-arrow-left::before {
    content: '\e70b'
}
.icon-arrow-right::before {
    content: '\e601'
}
.icon-download::before {
    content: '\e66f'
}
.icon-rotate::before {
    content: '\e65d'
}
.icon-warning::before {
    content: '\e61e'
}
</style>
